前话：我只是个自学到工作的小菜鸟，如果有大佬有更好的方法，希望不吝赐教。1.电脑环境node版本14.20.0   vue-cli4.4.0(如果你的项目是vue-cli5版本（即webpack5）的会有很多问题，解决办法写在后边)这是我用到的三个插件的版本，自行安装，版本请保持和我一致。【我发布了oh-my-toolsnpm包，也可以直接下载包使用，npmioh-my-tools,然后使用】 "file-saver":"^2.0.5",  "xlsx":"^0.16.9",  "xlsx-style-medalsoft":"^0.8.13"2.下边直接贴代码，复制能直接使用，完全二百五都能用

1、实现思路当用户不对输入框进行任何处理时，将数值转成千分符形式，例如12,345.67格式，在用户点击金额进行输入修改操作的时候，显示的数值形式12345.67，并且用户在输入过程中禁止输入中文、英文、特殊符号、英文逗号等，只能输入数字、一位小数点、小数点后2位；修改输入框内容时，更新表格合计值。2、截图效果3、实现代码el-tableref="table"border:data="tableData"v-loading="loading"max-height="300"show-summary:summary-method="getSummaries">el-table-columntyp

效果图：代码：el-col:span="24">el-form-itemlabel="组织负责人"prop="orgManagerId">el-selectv-model="form.orgManagerId":disabled="isTopNode">el-optionv-for="iteminorgManagerOptions":key="item.orgManagerId":label="item.orgManagerName":value="item.orgManagerId"/>el-select>el-form-item>el-col>代码解释：prop="orgManagerId

1.需求：仅修改当前页面的背景色，不修改所有el-table的背景色。先给table添加类名（如class="styleTable"）在style上面添加scoped写法：类名::v-deep.el-table类名{}注意：给styleTable也设置背景色为透明才生效。如下图所示👇2.需求：修改全局背景色单独创建一个css文件，给el-tableth,el-table_cell等你要修改的类名添加背景色为透明；在每个vue页面都引用此文件即可生效。扩展（也可以不用看）需求：设置table的最低高度把padding的值设为0即可。.el_table.el_table_cell{padding:

先说定位问题如果往里边动态添加内容，定位偏移下面是解决办法:绑定ref，最关键的是有这行代码:popper-options="{boundariesElement:'viewport',removeOnDestroy:true}"直接粘贴就行，这是html部分，在js部分也有一行代码click激活这是JS部分代码，this.$refs.popoverRef.updatePopper()这行代码意思是数据更新完重新计算位置，写在$nextTick里确保一定是数据更新完成之后，这几行代码放在你动态更新el-popover里的内容那行代码之后this.$nextTick(()=>{this.$ref

前言工作中使用elementUI框架时,会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况，通常后端代码会将数据做成分页查询，前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。正文代码第一步，创建select-load-more.js文件//定义全局自定义指令importVuefrom'vue'constselectLazyLoad=function(Vue){//el-select组件数据过多，使用翻页加载数据指令Vue.directive('selectLazyLoad',{bind(el,binding){constSELECT_WR

本文目录1.ElementUI介绍 2.安装2.1npm安装 2.2 CDN安装3.引入组件3.1完整引入3.2常用组件3.2.1 Container布局容器3.2.2Select选择器3.2.3From表单 3.2.4 Calendar日历1.ElementUI介绍 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。ElementUI官网 https://element.eleme.io   2.安装2.1npm安装 推荐使用npm的方式安装，它可以和 webpack打包工具使用。npmielement-u

    vue框架中我们常常用el-date-picker标签来显示和选择时间，那么，常见的时间的格式包含年-月-日（yyyy-MM-dd）、年-月-日时-分-秒（yyyy-MM-ddHH-mm-ss）、标准时间格式以及时间戳。那么今天我们就来总结一下常用的获取方法和它们之间的转换方法。    一、获取当前时间。    先看效果：              Ⅰ. 格式：年-月-日时-分-秒（yyyy-MM-ddHH-mm-ss） vue时间格式常见应用 获取当前时间（格式：年月日时分秒）：{{time}} exportdefault{ data(){ return{ time

 官网Element-Theworld'smostpopularVueUIframework 下载安装npminstall--saveelement-uiA.完整引用importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);newVue({el:'#app',render:h=>h(App)});B.按需引用1.设置CSS和JS文件,在public/index.html中引入

这个需求有点多选与单选结合的意思，同一父级下的子节点单选，又可以选择多个不同父级下的节点。这里以两级为例，实现一个在多选模式下，同一父级下最多只能选中一个子级的级联选择器。1、隐藏父级节点处的CheckBox多选模式下可以通过勾选父级一键选中所有的子级，而每个父级下可能有多个子级，也可能只有一个，起初我想的是根据本次选择选中的个数分类讨论，但讨论起来比较繁琐，所以最后决定直接把父级的checkbox隐藏掉，不让用户直接勾选父级，减少了很多不必要的麻烦。.hide{.el-cascader-menu:first-of-type{.el-cascader-node{.el-checkbox{dis